<template>
  <div class="page-container">
    <!-- 查询区域 -->
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <!-- 表格 -->
    <table-index :table="table" :rowKey="`id`" @loadData="loadData">
      <template #available="{ record }">
        <status-tag :value="record.available" :label="record.available == '1' ? '启用' : '停用'" />
        <!-- <span :class="[record.available == '1' ? 'success' : 'fail']">{{ record.available == '1' ? '启用' : '停用' }}</span> -->
      </template>
    </table-index>
  </div>
</template>

<script setup name="MerchantRole">
  import { onMounted, reactive, computed } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getList, roleDel, isRoleUser, roleEnable } from '@/api/merchant/role'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()

  const queryParam = reactive({})
  const searchList = computed(() => {
    return [
      {
        label: '角色名称',
        prop: 'role',
        type: 'a-input',
        maxlength: 20,
        change: (value) => {
          if (!value) {
            queryParam.role = null
          }
        },
      },
      {
        label: '状态',
        prop: 'available',
        type: 'a-select',
        options: [
          {
            label: '启用',
            value: 1,
          },
          {
            label: '停用',
            value: 0,
          },
        ],
      },
    ]
  })
  const table = useTable({
    columns: [
      { title: '角色名称', dataIndex: 'role', fixed: 'left' },
      { title: '备注', dataIndex: 'description', ellipsis: true },
      {
        title: '状态',
        dataIndex: 'available',
        slotName: 'available',
      },
      {
        title: '创建时间',
        dataIndex: 'insertDate',
        format: 'YYYY-MM-DD HH:mm:ss',
      },
      {
        title: '创建人',
        dataIndex: 'createUserName',
      },
    ],
    operates: [
      {
        label: '详情',
        show: (record) => record.adminRole != 1,
        permission: 'svms:merchant:role.detail',
        method: (record) => {
          const u_params = '?role=' + record.role + (record.description ? '&description=' + record.description : '')
          navigateTo(`/merchant/role/detail/${record.id}${u_params}`, record.role + '-角色详情')
        },
      },
      {
        label: '编辑',
        show: (record) => record.adminRole != 1,
        permission: 'svms:merchant:role.edit',
        method: (record) => {
          const u_params = '?role=' + record.role + (record.description ? '&description=' + record.description : '')
          navigateTo(`/merchant/role/edit/${record.id}${u_params}`, record.role + '-角色编辑')
        },
      },
      {
        label: '停用',
        show: (record) => record.available == 1 && record.adminRole != 1,
        permission: 'svms:merchant:role.disable',
        method: (record) => {
          handleEnable({ id: record.id, available: 0 })
        },
      },
      {
        label: '启用',
        show: (record) => record.available == 0 && record.adminRole != 1,
        permission: 'svms:merchant:role.use',
        method: (record) => {
          handleEnable({ id: record.id, available: 1 })
        },
      },
      {
        label: '删除',
        show: (record) => record.adminRole != 1,
        permission: 'svms:merchant:role.del',
        method: (record) => {
          confirmDeleteRole(record)
        },
      },
    ],
    buttons: [
      {
        type: 'primary',
        icon: 'plus',
        label: '新增',
        permission: 'svms:merchant:role.add',
        method: () => handleAdd(),
      },
    ],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getList)

  // 新增
  const handleAdd = () => {
    navigateTo('/merchant/role/create')
  }
  // 启用/停用
  const handleEnable = (val) => {
    Modal.confirm({
      title: `确认${val.available == '0' ? '停用' : '启用'}`,
      simple: true,
      content: `${
        val.available == '0'
          ? '再次点击确认后角色将被停用，该角色下赋予的权限将全部失效'
          : '再次点击确认后角色将被启用，该角色下的功能权限将被全部恢复'
      }`,
      okText: '确认',
      onOk: () => {
        enableFn(val)
      },
    })
  }
  const enableFn = (val) => {
    roleEnable(val).then((res) => {
      Message.success(res.message)
      loadData()
    })
  }
  // 判断角色是否关联人员
  const confirmDeleteRole = (record) => {
    Modal.confirm({
      title: '是否确认删除',
      cancelText: '取消',
      okText: '确认',
      onOk: () => {
        confirmDeleteFn(record)
      },
    })
  }
  const confirmDeleteFn = (record) => {
    isRoleUser({ id: record.id }).then((res) => {
      if (res.result) {
        deleteRole(record)
      } else {
        deleteFn(record)
      }
    })
  }
  // 删除
  const deleteRole = (record) => {
    Modal.confirm({
      title: '风险操作',
      cancelText: '取消',
      okText: '确认',
      content: '提示:当前角色已关联员工账号,删除后可能导致员工功能权限丢失,请确认是否继续删除?',
      onOk: () => {
        deleteFn(record)
      },
    })
  }
  const deleteFn = (record) => {
    roleDel({ id: record.id }).then(() => {
      Message.success('删除成功')
      loadData()
    })
  }
  // mounted 调用接口
  onMounted(() => {
    loadData()
  })
</script>
<style lang="less" scoped>
  .role-card {
    .fail {
      color: #ea0000;
    }
    .success {
      color: #00b42a;
    }
  }
</style>
